<template>
  <div ref="chart" style="width: 800px;height:400px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const chart = ref(null);
let myChart = null;

onMounted(() => {
  myChart = echarts.init(chart.value);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ['月投诉量', '月投诉量解决量', '月投诉增加率'],
    },
    xAxis: [
      {
        type: 'category',
        data: ['二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月'],
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '月投诉量解决量',
        min: 0,
        max: 30,
        interval: 10,
        axisLabel: {
          formatter: '{value}',
        },
      },
      {
        type: 'value',
        name: '月投诉增加率',
        min: -30,
        max: 30,
        interval: 10,
        axisLabel: {
          formatter: '{value}%',
        },
      },
    ],
    series: [
      {
        name: '月投诉量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '';
          },
        },
        data: [30, 26, 25, 22, 20, 12, 8, 1],
      },
      {
        name: '月投诉量解决量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value + '';
          },
        },
        data: [28, 24, 23, 22, 19, 12, 8, 0],
      },
      {
        name: '月投诉增加率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value + ' %';
          },
        },
        data: [-1, -6, -10, -13, -16, -19, -21, -23],
      },
    ],
  };
  myChart.setOption(option);
});

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped>
/* 你可以在这里添加一些样式 */
</style>
